<template>
    <div class="h-between-center h100 w100 pt20">
        <div class="w30 fg1 h100 mr10 bg-white v-start-center p10 br10">
            <el-calendar></el-calendar>
            <div class="fg1 w100 scroll">
                <div class="h-start-center mb15">
                    <svg-icon icon-class="file" class="primary-color"></svg-icon>
                    <div>待办事项</div>
                </div>
                <div
                    v-for="(item, index) in DBSX"
                    :key="index"
                    class="task-item h-start-center mb20"
                    @click="onDBSXClick(item)"
                >
                    <div class="icon-box mr10 ml10 h-center">
                        <svg-icon icon-class="calendar" class="primary-color f24"></svg-icon>
                    </div>
                    <div>
                        <div class="fam">{{ item.name }}自评申报</div>
                        <div class="op5">自评得分：{{ item.zpScore.toFixed(2) }}分</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h100 w70 v-start-center">
            <div class="h40 mb10 w100 h-between-center">
                <div class="w50 mr5 h100 bg-white p10 v-start-center br5">
                    <div class="h-start-center w100">
                        <svg-icon icon-class="file" class="primary-color"></svg-icon>
                        <div class="f16 fam ml5">通知公告</div>
                    </div>
                    <el-divider class="mt10"></el-divider>
                    <div class="w100 scroll">
                        <div v-for="(item, index) in TZGG" :key="index" class="h-between-center article-row">
                            <div class="fg1 ell-t mr20 pt10 pb10" :title="item.title" @click="onNoticeClick(item)">
                                【{{ item.releaseUnit }}】{{ item.name }}
                            </div>
                            <div class="op5" style="width: 110px">
                                {{ $moment(item.releaseDateTime).format('YYYY-MM-DD') }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w50 ml5 h100 bg-white p10 v-start-center br5">
                    <div class="h-start-center w100">
                        <svg-icon icon-class="file" class="primary-color"></svg-icon>
                        <div class="f16 fam ml5">政策法规</div>
                    </div>
                    <el-divider class="mt10"></el-divider>
                    <div class="w100 scroll">
                        <div v-for="(item, index) in ZCFG" :key="index" class="h-between-center article-row w100">
                            <div
                                :class="index > 2 ? 'ell-t' : 'ell-b'"
                                class="w70 mr20 pt10 pb10"
                                @click="onPolicyClick(item)"
                            >
                                【{{ item.releaseUnit }}】{{ item.name }}
                            </div>
                            <div class="op5" style="width: 110px">
                                {{ $moment(item.releaseDateTime).format('YYYY-MM-DD') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template v-if="$store.state.userInfo.roleCode != 1">
                <div class="fg1 w100 bg-white br5 p10 p-r map-ct">
                    <div class="h-between-center w100 pr20 map-toolbar">
                        <div class="h-start-center">
                            <svg-icon icon-class="file" class="primary-color"></svg-icon>
                            <div class="f16 fam ml5">申报情况</div>
                        </div>
                        <a-select size="small" v-model="map.dataType" @change="onDeclareTypeChange">
                            <a-select-option value="1">申报成功</a-select-option>
                            <a-select-option value="2">撤牌</a-select-option>
                            <a-select-option value="3">申报中</a-select-option>
                        </a-select>
                    </div>
                    <div class="p-a w100 h100 map" id="homeMapBox">
                        <home-map
                            v-if="mapBox.ready"
                            id="homeApplyStatisticsMap"
                            :width="mapBox.width"
                            :height="mapBox.height"
                            :markerList="markerList"
                            :adcode="adcode"
                        ></home-map>
                    </div>
                </div>
            </template>
            <template v-if="$store.state.userInfo.roleCode == 1">
                <div class="h15 mb10 w100 h-between-center bg-white">
                    <div class="w100 h100 bg-white p10 v-start-center br5">
                        <div class="h-start-center w100">
                            <svg-icon icon-class="file" class="primary-color"></svg-icon>
                            <div class="f16 fam ml5">申报进度</div>
                        </div>
                        <el-divider class="mt10"></el-divider>
                        <div class="w100 scroll fg1 pt2">
                            <a-steps progress-dot direction="horizontal" size="small" :current="stepObj.current">
                                <a-step
                                    v-for="(item, index) in stepObj.list"
                                    :disabled="item.disabled"
                                    :title="item.label"
                                    :key="index"
                                ></a-step>
                            </a-steps>
                        </div>
                    </div>
                </div>
                <div class="fg1 w100 bg-white br5 p10 p-r">
                    <div class="h-between-center w100 pr20">
                        <div class="h-start-center">
                            <svg-icon icon-class="file" class="primary-color"></svg-icon>
                            <div class="f16 fam ml5">
                                自评得分
                                <span class="primary-color">{{ zpTotalScore ? zpTotalScore.toFixed(2) : 0 }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="p-a w100 h100" id="homeMapBox">
                        <home-radar
                            v-if="mapBox.ready && radarData.length > 0"
                            id="homeApplyStatisticsRadar"
                            :width="mapBox.width"
                            :height="mapBox.height"
                            :data="radarData"
                            :maxValue="radarMaxValue"
                        ></home-radar>
                    </div>
                </div>
            </template>
        </div>

        <notice-detail-modal
            v-if="isOpenNoticeDetailModal"
            :isShowModal.sync="isOpenNoticeDetailModal"
            :currRow="noticeDetail"
        />
        <policy-detail-modal
            v-if="isOpenPolicyDetailModal"
            :isShowModal.sync="isOpenPolicyDetailModal"
            :currRow="policyDetail"
        />
    </div>
</template>

<script>
import HomeMap from '@/d3/map/home/index.vue'
import HomeRadar from '@/d3/radar/home.vue'
import noticeDetailModal from '../notice/modal/detail'
import policyDetailModal from '../policy/modal/detail'
import {
    noticeRestApi,
    policyRestApi,
    handleListGet,
    mapDeclareListGet,
    currentNodeGet,
    currentScoreGet,
} from '@/common/api/setting'

export default {
    name: 'home',
    components: { HomeMap, HomeRadar, noticeDetailModal, policyDetailModal },
    data() {
        return {
            TZGG: [],
            ZCFG: [],
            isOpenNoticeDetailModal: false,
            isOpenPolicyDetailModal: false,
            noticeDetail: null,
            policyDetail: null,

            DBSX: [],

            stepObj: {
                current: 0,
                list: [
                    {
                        label: '城市自评中',
                    },
                    {
                        label: '复核中',
                    },
                    {
                        label: '复核退回',
                    },
                    {
                        label: '复核终止',
                    },
                    {
                        label: '综合评议中',
                    },
                    {
                        label: '综合评议退回',
                    },
                    {
                        label: '综合评议终止',
                    },
                    {
                        label: '综合评议完成',
                    },
                    {
                        label: '命名授牌完成',
                    },
                    {
                        label: '撤销命名、摘牌',
                    },
                ],
            },
            radarData: [],
            markerList: [],
            adcode: '510000',
            zpTotalScore: 0,
            mapBox: { ready: false },
            map: {
                dataType: '1',
            },
        }
    },
    computed: {
        radarMaxValue() {
            // return _.max(this.radarData.map(n => n.value))
            // 改为百分比体现
            return 100
        },
    },
    async mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                let dom = document.getElementById('homeMapBox')
                const { offsetWidth, offsetHeight } = dom
                this.mapBox.width = offsetWidth
                this.mapBox.height = offsetHeight
                this.mapBox.ready = true
                console.log(this.mapBox)
            }, 100)
        })

        this.loadArticle()
        this.loadHandlerData()
        this.loadMapData()

        if (this.$store.state.userInfo.roleCode != 1) {
            this.adcode = this.$store.state.userInfo.areaCode || '510000'
        } else {
            {
                let res = await currentNodeGet()
                this.stepObj.current = res.data.cjzt - 1
            }
            {
                let res = await currentScoreGet()
                console.log(res)
                this.radarData = res.data.itemList.map(n => {
                    return {
                        label: n.name,
                        value: Math.ceil((n.zpScore * 100) / n.itemTotalScore),
                    }
                })

                this.zpTotalScore = res.data.zpScore
            }
        }
    },
    methods: {
        onDBSXClick(record) {
            if (record.ifCheck) {
                this.$router.push(`/applyManage/Check?id=${record.id}`)
            } else {
                this.$router.push({ name: 'applyManage' })
            }
        },
        onNoticeClick(notice) {
            this.noticeDetail = notice
            this.isOpenNoticeDetailModal = true
        },
        onPolicyClick(policy) {
            this.noticeDetail = policy
            this.isOpenNoticeDetailModal = true
        },
        onDeclareTypeChange() {
            this.loadMapData()
        },
        async loadArticle() {
            {
                let res = await noticeRestApi.get()

                if (res.code == 200) {
                    this.TZGG = res.data.list
                }
            }
            {
                let res = await policyRestApi.get()

                if (res.code == 200) {
                    this.ZCFG = res.data.list
                }
            }
        },
        async loadHandlerData() {
            let res = await handleListGet()

            if (res.code == 200) {
                this.DBSX = res.data
            }
        },
        async loadMapData() {
            let res = await mapDeclareListGet({
                type: this.map.dataType,
            })

            console.log('loadMapData', res)
            if (res.code == 200) {
                this.markerList = res.data
            }
        },
    },
}
</script>

<style lang="scss" scoped>
/deep/ .el-calendar-table .el-calendar-day {
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
/deep/ .el-calendar-table {
    thead {
        th {
            text-align: center;
        }
    }
}

.task-item {
    background: #f7fafe;
    border: 1px solid #e2e5ea;
    border-radius: 5px;
    height: 88px;
    width: 100%;
    .icon-box {
        width: 56px;
        height: 56px;
        background: #deebff;
        border-radius: 8px;
    }

    &:hover {
        cursor: pointer;
    }
}

.article-row {
    &:hover {
        background-color: #cce0ff;
        cursor: pointer;
    }
}

.map-ct {
    position: relative;
}
.map-toolbar {
    z-index: 1;
    position: absolute;
}
.map {
    z-index: 0;
}
</style>
